<template>
    <div class="wrap">
        <div class="header">
            <div class="header-l">
                <img src="../assets/logo.png" alt="" class="logo">
                <p class="title">&nbsp;&nbsp;良信智能</p>
            </div>
            <div class="header-r flex_h align_center">
                <div class="flex_h align_center">
                    <img src="../assets/user.png" alt="" width="27">
                    <span class="fz12 white_content">&nbsp;Lixue</span>
                </div>
                <div class="flex_h align_center">
                    <img src="../assets/Log out.png" alt="" width="24">
                    <span class="fz12 white_content">&nbsp;退出登录</span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="tab_head flex_h align_center">
                <div :class="['sign','s'+activeIndex]"></div>
                <div class="tab_item flex_v align_center" @click="switchItem(0)">
                    <div :class="activeIndex == 0 ? 'active' : ''">
                        <img src="../assets/On-01.png" v-show="activeIndex == 0">
                        <img src="../assets/Off-01.png" v-show="activeIndex !== 0">
                    </div>
                    <span>网络状态</span>
                </div>
                <div class="tab_item flex_v align_center" @click="switchItem(1)">
                    <div :class="activeIndex == 1 ? 'active' : ''">
                        <img src="../assets/On-02.png" v-show="activeIndex == 1">
                        <img src="../assets/Off-02.png" v-show="activeIndex !== 1">
                    </div>
                    <span>WAN</span>
                </div>
                <div class="tab_item flex_v align_center" @click="switchItem(2)">
                    <div :class="activeIndex == 2 ? 'active' : ''">
                        <img src="../assets/On-03.png" v-show="activeIndex == 2">
                        <img src="../assets/Off-03.png" v-show="activeIndex !== 2">
                    </div>
                    <span>上网控制</span>
                </div>
                <div class="tab_item flex_v align_center" @click="switchItem(3)">
                    <div :class="activeIndex == 3 ? 'active' : ''">
                        <img src="../assets/On-04.png" v-show="activeIndex == 3">
                        <img src="../assets/Off-04.png" v-show="activeIndex !== 3">
                    </div>
                    <span>高级功能</span>
                </div>
                <div class="tab_item flex_v align_center" @click="switchItem(4)">
                    <div :class="activeIndex == 4 ? 'active' : ''">
                        <img src="../assets/On-05.png" v-show="activeIndex == 4">
                        <img src="../assets/Off-05.png" v-show="activeIndex !== 4">
                    </div>
                    <span>系统设置</span>
                </div>
            </div>
            <div class="tab_content">
                <div v-show="activeIndex == 0">
                    <el-row :gutter="40">
                        <el-col :md="12" :sm="24">
                            <div class="list">
                                <p class="list_t">WAN状态</p>
                                <div class="list_line"></div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>已连接时间</span>
                                    <span>01h 06min 38s</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>连接状态</span>
                                    <span>已连接</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>IP地址</span>
                                    <span>192.168.0.1</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>协议类型</span>
                                    <span>dhcp</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>MAC地址</span>
                                    <span>f8:84:79:01:b0:76s</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :md="12" :sm="24" class="mb_v_margin">
                            <div class="list">
                                <p class="list_t">系统信息</p>
                                <div class="list_line"></div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>工作模式</span>
                                    <span>家用网关</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>固件版本</span>
                                    <span>V4.2</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>运行时长</span>
                                    <span>01h 06min 38s</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>ieee地址</span>
                                    <span>f8:84:79:01:b0:76</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>内存使用率</span>
                                    <span>88.0% / 100%</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="tab_v_margin">
                        <el-col :span="24">
                            <p class="list_t">AP列表</p>
                            <div class="list_line"></div>
                        </el-col>
                    </el-row>
                    <el-row class="mb">
                        <el-col :span="24">
                            <div class="list">
                                <div class="list_item flex_h align_center justify_between">
                                    <span>序号</span>
                                    <span>E1SC30-9b</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>MAC地址</span>
                                    <span>V4.2</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>IP地址</span>
                                    <span>192.168.0.1</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>在线人数</span>
                                    <span>4</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>状态</span>
                                    <span>连接</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>版本</span>
                                    <span>V4.1</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="pc">
                        <el-col :md="12" :sm="24">
                            <div class="list">
                                <div class="flex_h align_center list_item_uniform">
                                    <p class="t">序号</p>
                                    <p class="t">MAC地址</p>
                                    <p class="t">IP地址</p>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>E1SC30-9b</p>
                                    <p>f8:84:79:01:b0:76</p>
                                    <p>192.168.0.1</p>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>E1SC30-9b</p>
                                    <p>f8:84:79:01:b0:76</p>
                                    <p>192.168.0.1</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :md="12" :sm="24">
                            <div class="list">
                                <div class="flex_h align_center list_item_uniform">
                                    <p class="t">在线人数</p>
                                    <p class="t">状态</p>
                                    <p class="t">版本</p>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>4</p>
                                    <p>连接</p>
                                    <p>V4.1</p>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>4</p>
                                    <p>连接</p>
                                    <p>V4.1</p>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="activeIndex == 1">
                    <el-row :gutter="40">
                        <el-col :md="12" :sm="24">
                            <div class="list">
                                <p class="list_t">WAN状态</p>
                                <div class="list_line"></div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>已连接时间</span>
                                    <span>01h 06min 38s</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>连接状态</span>
                                    <span>已连接</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>MAC地址</span>
                                    <span>192.168.0.1</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>连接方式</span>
                                    <span>dhcp</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>IP地址</span>
                                    <span>192.168.0.1</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>子网掩码</span>
                                    <span>255.255.255.0</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>DNS服务器</span>
                                    <span>192.168.20.1</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :md="12" :sm="24" class="mb_v_margin">
                            <div class="list">
                                <p class="list_t">系统信息</p>
                                <div class="list_line"></div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>协议</span>
                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                        <el-option
                                          v-for="(item,index) in protocolOpts"
                                          :key="index"
                                          :label="item"
                                          :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div v-show="protocol == 'DHCP客户端'">
                                    <div class="list_item flex_h align_center justify_between no-b">
                                        <span>请求时发送主机名</span>
                                        <el-input class="tab_input"></el-input>
                                    </div>
                                </div>
                                <div v-show="protocol == '静态地址'">
                                    <div class="list_item flex_h align_center justify_between no-b">
                                        <span>IP地址</span>
                                        <el-input class="tab_input"></el-input>
                                    </div>
                                    <div class="list_item flex_h align_center justify_between no-b">
                                        <span>子网掩码</span>
                                        <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                            <el-option
                                              v-for="(item,index) in protocolOpts"
                                              :key="index"
                                              :label="item"
                                              :value="item">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="list_item flex_h align_center justify_between no-b">
                                        <span>网关</span>
                                        <el-input class="tab_input"></el-input>
                                    </div>
                                    <div class="list_item flex_h align_center justify_between no-b">
                                        <span>广播</span>
                                        <el-input class="tab_input"></el-input>
                                    </div>
                                    <div class="list_item flex_h align_center justify_between no-b">
                                        <span>DNS服务器</span>
                                        <el-input class="tab_input"></el-input>
                                    </div>
                                </div>
                                <div v-show="protocol == 'PPOE'">
                                    <div class="list_item flex_h align_center justify_between no-b">
                                        <span>PAP/CHAP用户名</span>
                                        <el-input class="tab_input"></el-input>
                                    </div>
                                    <div class="list_item flex_h align_center justify_between no-b">
                                        <span>PAP/CHAP密码</span>
                                        <el-input class="tab_input"></el-input>
                                    </div>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b" style="margin-top: 15px;">
                                    <div class="submit_btn">确认</div>
                                    <div>
                                        <el-button type="info" size="small">保存</el-button>
                                        <el-button type="info" size="small">复位</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="activeIndex == 2">
                    <el-row>
                        <el-col :span="24">
                            <p class="list_t">AP列表</p>
                            <div class="list_line"></div>
                        </el-col>
                    </el-row>
                    <el-row class="pc">
                        <el-col :md="12" :sm="24">
                            <div class="list">
                                <div class="flex_h align_center list_item_uniform">
                                    <p class="t">序号</p>
                                    <p class="t">MAC地址</p>
                                    <p class="t">IP地址</p>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>E1SC30-9b</p>
                                    <p>f8:84:79:01:b0:76</p>
                                    <p>192.168.0.1</p>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>E1SC30-9b</p>
                                    <p>f8:84:79:01:b0:76</p>
                                    <p>192.168.0.1</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :md="12" :sm="24">
                            <div class="list">
                                <div class="flex_h align_center list_item_uniform">
                                    <p class="t">在线人数</p>
                                    <p class="t">状态</p>
                                    <p class="t">操作</p>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>4</p>
                                    <p>连接</p>
                                    <div><el-button type="primary" size="mini" class="btn_mini">执行重启</el-button></div>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>4</p>
                                    <p>连接</p>
                                    <div><el-button type="primary" size="mini" class="btn_mini">执行重启</el-button></div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="mb">
                        <el-col :span="24">
                            <div class="list">
                                <div class="list_item flex_h align_center justify_between">
                                    <span>序号</span>
                                    <span>E1SC30-9b</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>MAC地址</span>
                                    <span>V4.2</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>IP地址</span>
                                    <span>192.168.0.1</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>在线人数</span>
                                    <span>4</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>状态</span>
                                    <span>连接</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span></span>
                                    <div><el-button type="primary" size="mini" class="btn_mini">执行重启</el-button></div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="40" class="tab_v_margin">
                        <el-col :md="12" :sm="24">
                            <p class="list_t">AP WiFi配置列表</p>
                            <div class="list_line"></div>
                            <div class="list pc">
                                <div class="flex_h align_center list_item_uniform">
                                    <p class="t">MAC地址</p>
                                    <p class="t">IP地址</p>
                                    <p class="t">SSID</p>
                                    <p class="t">密码</p>
                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>f8:84:79:01:b0:76</p>
                                    <p>192.168.0.1</p>
                                    <p>nader001</p>
                                    <p>nader123</p>

                                </div>
                                <div class="flex_h align_center list_item_uniform">
                                    <p>f8:84:79:01:b0:76</p>
                                    <p>192.168.0.1</p>
                                    <p>nader001</p>
                                    <p>nader123</p>
                                </div>
                            </div>
                            <div class="list mb">
                                <div class="list_item flex_h align_center justify_between">
                                    <span>MAC地址</span>
                                    <span>E1SC30-9b</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>IP地址</span>
                                    <span>192.168.0.1</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between">
                                    <span>SSID</span>
                                    <span>4</span>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>密码</span>
                                    <span>连接</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :md="12" :sm="24" class="mb_v_margin">
                            <p class="list_t">AP WiFi配置</p>
                            <div class="list_line"></div>
                            <div class="list">
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>MAC地址</span>
                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                        <el-option
                                          v-for="(item,index) in protocolOpts"
                                          :key="index"
                                          :label="item"
                                          :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>SSID</span>
                                    <el-input class="tab_input"></el-input>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>密码</span>
                                    <el-input class="tab_input"></el-input>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b" style="margin-top: 15px;">
                                    <div></div>
                                    <div class="submit_btn mb_fill">配置</div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="activeIndex == 3">
                    <div>
                        <div class="tab3_head pc">
                            <div :class="['tab3_head_item',tab3Index == 0 ? 'active' : '']" @click="switchTab3(0)">
                                <span>4G网络配置</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 1 ? 'active' : '']" @click="switchTab3(1)">
                                <span>DHCP</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 2 ? 'active' : '']" @click="switchTab3(2)">
                                <span>防火墙</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 3 ? 'active' : '']" @click="switchTab3(3)">
                                <span>网络诊断</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 4 ? 'active' : '']" @click="switchTab3(4)">
                                <span>RS485</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 5 ? 'active' : '']" @click="switchTab3(5)">
                                <span>日志</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 6 ? 'active' : '']" @click="switchTab3(6)">
                                <span>Zigbee参数</span>
                            </div>
                        </div>
                        <div class="tab3_head_mb mb">
                            <div :class="['tab3_head_item',tab3Index == 0 ? 'active' : '']" @click="switchTab3(0)">
                                <span>4G网络配置</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 1 ? 'active' : '']" @click="switchTab3(1)">
                                <span>DHCP</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 2 ? 'active' : '']" @click="switchTab3(2)">
                                <span>防火墙</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 3 ? 'active' : '']" @click="switchTab3(3)">
                                <span>网络诊断</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 4 ? 'active' : '']" @click="switchTab3(4)">
                                <span>RS485</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 5 ? 'active' : '']" @click="switchTab3(5)">
                                <span>日志</span>
                            </div>
                            <div :class="['tab3_head_item',tab3Index == 6 ? 'active' : '']" @click="switchTab3(6)">
                                <span>Zigbee参数</span>
                            </div>
                        </div>
                        <div class="tab3_content">
                            <div v-show="tab3Index == 0" class="md_wrap2 mb_fill">
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>调制解调器节点</span>
                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                        <el-option
                                          v-for="(item,index) in protocolOpts"
                                          :key="index"
                                          :label="item"
                                          :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b">
                                    <span>服务类型</span>
                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                        <el-option
                                          v-for="(item,index) in protocolOpts"
                                          :key="index"
                                          :label="item"
                                          :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="list_item flex_h align_center justify_between no-b" style="margin-top: 15px;">
                                    <div class="submit_btn">保存并应用</div>
                                    <div>
                                        <el-button type="info" size="small">保存</el-button>
                                        <el-button type="info" size="small">复位</el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-show="tab3Index == 1">
                                <el-row class="">
                                    <el-col :span="24">
                                        <p class="list_t">已分配的DHCP租约</p>
                                        <div class="list_line"></div>
                                        <div class="list pc">
                                            <div class="flex_h align_center list_item_uniform">
                                                <p class="t">主机名</p>
                                                <p class="t">IPv4地址</p>
                                                <p class="t">MAC地址</p>
                                                <p class="t">剩余租期</p>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform">
                                                <p>f8:84:79:01:b0:76</p>
                                                <p>192.168.0.1</p>
                                                <p>nader001</p>
                                                <p>nader123</p>

                                            </div>
                                            <div class="flex_h align_center list_item_uniform">
                                                <p>f8:84:79:01:b0:76</p>
                                                <p>192.168.0.1</p>
                                                <p>nader001</p>
                                                <p>nader123</p>
                                            </div>
                                        </div>
                                        <div class="list mb">
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>主机名</span>
                                                <span>f8:84:79:01:b0:76</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>IPv4地址</span>
                                                <span>192.168.0.1</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>MAC地址</span>
                                                <span>nader001</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between no-b">
                                                <span>剩余租期</span>
                                                <span>4</span>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row class="tab_v_margin">
                                    <el-col :span="24">
                                        <p class="list_t">静态地址分配</p>
                                        <div class="list_line"></div>
                                        <div class="list pc">
                                            <div class="flex_h align_center list_item_uniform">
                                                <p class="t">主机名</p>
                                                <p class="t">IPv4地址</p>
                                                <p class="t">MAC地址</p>
                                                <p class="t">IPv6后缀（十六进制）</p>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform">
                                                <p>f8:84:79:01:b0:76</p>
                                                <p>192.168.0.1</p>
                                                <p>nader001</p>
                                                <p>nader123</p>

                                            </div>
                                            <div class="flex_h align_center list_item_uniform">
                                                <p>f8:84:79:01:b0:76</p>
                                                <p>192.168.0.1</p>
                                                <p>nader001</p>
                                                <p>nader123</p>
                                            </div>
                                        </div>
                                        <div class="list mb">
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>主机名</span>
                                                <span>f8:84:79:01:b0:76</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>IPv4地址</span>
                                                <span>192.168.0.1</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>MAC地址</span>
                                                <span>nader001</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between no-b">
                                                <span>IPv6后缀（十六进制）</span>
                                                <span>4</span>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row class="mt20" justify="start" type="flex">
                                <el-button type="primary" size="small" class="mb_fill">新增</el-button>
                                </el-row>
                                <el-row class="tab_v_margin">
                                <el-col :md="12" :sm="24">
                                    <p class="list_t">动态地址分配</p>
                                    <div class="list_line"></div>
                                    <div class="list">
                                        <div class="list_item flex_h align_center justify_between no-b">
                                            <span>动态地址分配</span>
                                            <el-input class="tab_input"></el-input>
                                        </div>
                                        <div class="list_item flex_h align_center justify_between no-b">
                                            <span>分配IP数量</span>
                                            <el-input class="tab_input"></el-input>
                                        </div>
                                        <div class="list_item flex_h align_center justify_between no-b">
                                            <span>DHCP租期</span>
                                            <el-input class="tab_input"></el-input>
                                        </div>
                                        <div class="list_item flex_h align_center justify_between no-b" style="margin-top: 15px;">
                                            <el-button type="primary" size="small">保存并应用</el-button>
                                            <div>
                                                <el-button type="info" size="small">保存</el-button>
                                                <el-button type="info" size="small">复位</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                                </el-row>
                            </div>
                            <div v-show="tab3Index == 2">
                                <el-row class="">
                                    <el-col :span="24">
                                        <p class="list_t">端口转发</p>
                                        <div class="list_line"></div>
                                        <div class="list pc">
                                            <div class="flex_h align_center list_item_uniform">
                                                <p class="t">名字</p>
                                                <p class="t">匹配规则</p>
                                                <p class="t">转发到</p>
                                                <p class="t">开启</p>
                                                <p class="t">排序</p>
                                                <p class="t">操作</p>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform no-h no-b">
                                                <p>Forward</p>
                                                <div><p class="w80">IPv4-TCP,UDP来自所有主机位于WAN通过所有路由地址</p></div>
                                                <p>所有主机位于LAN</p>
                                                <el-switch
                                                  active-color="#30BBF7"
                                                  inactive-color="#efefef"
                                                  v-model="val1"
                                                  >
                                                </el-switch>
                                                <div>
                                                    <el-button type="info" size="mini"><i class="el-icon-arrow-up"></i></el-button>
                                                    <el-button type="info" size="mini"><i class="el-icon-arrow-down"></i></el-button>
                                                </div>
                                                <div>
                                                    <el-button type="info" size="mini">删除</el-button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="list mb">
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>名字</span>
                                                <span>Forward</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>匹配规则</span>
                                                <span>IPv4-TCP,UDP来自所有主机位于WAN通过所有路由地址</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>转发到</span>
                                                <span>所有主机位于LAN</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>开启</span>
                                                <el-switch
                                                  active-color="#30BBF7"
                                                  inactive-color="#efefef"
                                                  v-model="val1"
                                                  >
                                                </el-switch>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>排序</span>
                                                <div>
                                                    <el-button type="info" size="mini"><i class="el-icon-arrow-up"></i></el-button>
                                                    <el-button type="info" size="mini"><i class="el-icon-arrow-down"></i></el-button>
                                                </div>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between no-b">
                                                <span>操作</span>
                                                <div>
                                                    <el-button type="info" size="small">删除</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row class="tab_v_margin">
                                    <el-col :span="24">
                                        <p class="list_t">静态地址分配</p>
                                        <div class="list_line"></div>
                                        <div class="list pc">
                                            <div class="flex_h align_center list_item_uniform">
                                                <p class="t">名字</p>
                                                <p class="t">协议</p>
                                                <p class="t">外网区域</p>
                                                <p class="t">外部端口</p>
                                                <p class="t">内部区域</p>
                                                <p class="t">内部IP地址</p>
                                                <p class="t">内部端口</p>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform no-b">
                                                <div><el-input size="mini" class="w_85"></el-input></div>
                                                <div>
                                                    <el-select v-model="protocol" placeholder="请选择" size="mini" class="w_85">
                                                        <el-option
                                                          v-for="(item,index) in protocolOpts"
                                                          :key="index"
                                                          :label="item"
                                                          :value="item">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-select v-model="protocol" placeholder="请选择" size="mini" class="w_85">
                                                        <el-option
                                                          v-for="(item,index) in protocolOpts"
                                                          :key="index"
                                                          :label="item"
                                                          :value="item">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div><el-input size="mini" class="w_85"></el-input></div>
                                                <div>
                                                    <el-select v-model="protocol" placeholder="请选择" size="mini" class="w_85">
                                                        <el-option
                                                          v-for="(item,index) in protocolOpts"
                                                          :key="index"
                                                          :label="item"
                                                          :value="item">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-select v-model="protocol" placeholder="请选择" size="mini" class="w_85">
                                                        <el-option
                                                          v-for="(item,index) in protocolOpts"
                                                          :key="index"
                                                          :label="item"
                                                          :value="item">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div><el-input size="mini" class="w_85"></el-input></div>
                                            </div>
                                        </div>
                                        <div class="list mb">
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>名字</span>
                                                <span>E1SC30-9b</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>协议</span>
                                                <span>V4.2</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>外网区域</span>
                                                <span>192.168.0.1</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>外部端口</span>
                                                <span>4</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>内部区域</span>
                                                <span>连接</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>内部IP地址</span>
                                                <span>V4.1</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between no-b">
                                                <span>内部端口</span>
                                                <span>V4.1</span>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row type="flex" justify="end" class="mt20">
                                    <!-- <el-col :span="24" > -->
                                        <!-- <div> -->
                                            <el-button type="primary" size="small" class="mb_fill" @click="addJudge">添加</el-button>
                                        <!-- </div> -->
                                        <div class="pc" style="margin-left: 45px;">
                                            <el-button type="info" size="small">取消</el-button>
                                            <el-button type="info" size="small">复位</el-button>
                                        </div>
                                    <!-- </el-col> -->
                                </el-row>
                                <el-row class="tab_v_margin">
                                    <el-col :span="24">
                                        <p class="list_t">MAC地址过滤</p>
                                        <div class="list_line"></div>
                                        <div class="list pc">
                                            <div class="flex_h align_center list_item_uniform">
                                                <div class="w100"><p class="t">源端口</p></div>
                                                <div class="w200"><p class="t">目的端口</p></div>
                                                <div class="w200"><p class="t">源MAC地址</p></div>
                                                <div class="w200"><p class="t">动作</p></div>
                                                <div class="w100"><p class="t">操作</p></div>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform">
                                                <div class="w100"><p>LAN</p></div>
                                                <div class="w200"><p>LAN</p></div>
                                                <div class="w200"><p>LAN</p></div>
                                                <div class="w200"><p>LAN</p></div>
                                               <div class="w100"><el-button type="info" size="small">删除</el-button></div>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform no-b">
                                                <div class="w100"><el-input size="small" class="w_85"></el-input></div>
                                                <div class="w200">
                                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="input1">
                                                        <el-option
                                                          v-for="(item,index) in protocolOpts"
                                                          :key="index"
                                                          :label="item"
                                                          :value="item">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div class="w200"><el-input size="small" class="input1"></el-input></div>
                                                <div class="w200">
                                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="input1">
                                                        <el-option
                                                          v-for="(item,index) in protocolOpts"
                                                          :key="index"
                                                          :label="item"
                                                          :value="item">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div class="w100"><el-button type="primary" size="small">添加</el-button></div>
                                            </div>
                                        </div>
                                        <div class="list mb">
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>源端口</span>
                                                <span>E1SC30-9b</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>目的端口</span>
                                                <span>V4.2</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>源MAC地址</span>
                                                <span>192.168.0.1</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>动作</span>
                                                <span>4</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between no-b">
                                                <span>操作</span>
                                                <el-button type="info" size="small">删除</el-button>
                                            </div>
                                            <div>
                                                <el-button type="primary" size="small" class="mb_fill">添加</el-button>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row class="tab_v_margin">
                                    <el-col :span="24">
                                        <p class="list_t">域名过滤</p>
                                        <div class="list_line"></div>
                                        <div class="list pc">
                                            <div class="flex_h align_center list_item_uniform">
                                                <p class="t">域名</p>
                                                <p class="t">动作</p>
                                                <div class="w100"><p class="t">操作</p></div>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform">
                                               <p>www.baidu.com</p>
                                               <p>DROP</p>
                                               <div class="w100"><el-button type="info" size="small">删除</el-button></div>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform no-b">
                                                <div>
                                                    <el-input size="small" class="w80"></el-input>
                                                </div>
                                                <div>
                                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="w80">
                                                    <el-option
                                                      v-for="(item,index) in protocolOpts"
                                                      :key="index"
                                                      :label="item"
                                                      :value="item">
                                                    </el-option>
                                                </el-select>
                                                </div>
                                                <div class="w100"><el-button type="primary" size="small">添加</el-button></div>
                                            </div>
                                        </div>
                                        <div class="list mb">
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>域名</span>
                                                <span>192.168.0.1</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>动作</span>
                                                <span>4</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between no-b">
                                                <span>操作</span>
                                                <el-button type="info" size="small">删除</el-button>
                                            </div>
                                            <div>
                                                <el-button type="primary" size="small" class="mb_fill">添加</el-button>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row class="tab_v_margin">
                                    <el-col :span="24">
                                        <p class="list_t">DMZ</p>
                                        <div class="list_line"></div>
                                        <div class="list pc">
                                            <div class="flex_h align_center list_item_uniform">
                                                <div class="w100"><p class="t">源端口</p></div>
                                                <p class="t">协议</p>
                                                <p class="t">目的IP</p>
                                                <p class="t">动作</p>
                                                <div class="w100"><p class="t">操作</p></div>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform">
                                               <div class="w100"><p>LAN</p></div>
                                               <p>LAN</p>
                                               <p>LAN</p>
                                               <p>LAN</p>
                                               <div class="w100"><el-button type="info" size="small">删除</el-button></div>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform no-b">
                                                <div class="w100">
                                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="w80">
                                                        <el-option
                                                          v-for="(item,index) in protocolOpts"
                                                          :key="index"
                                                          :label="item"
                                                          :value="item">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="w80">
                                                        <el-option
                                                          v-for="(item,index) in protocolOpts"
                                                          :key="index"
                                                          :label="item"
                                                          :value="item">
                                                        </el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-input size="small" class="w80"></el-input>
                                                </div>
                                                <div>
                                                    <el-input size="small" class="w80"></el-input>
                                                </div>
                                                <div class="w100"><el-button type="primary" size="small">添加</el-button></div>
                                            </div>
                                        </div>
                                        <div class="list mb">
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>源端口</span>
                                                <span>E1SC30-9b</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>协议</span>
                                                <span>E1SC30-9b</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>目的IP</span>
                                                <span>V4.2</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between">
                                                <span>动作</span>
                                                <span>4</span>
                                            </div>
                                            <div class="list_item flex_h align_center justify_between no-b">
                                                <span>操作</span>
                                                <el-button type="info" size="small">删除</el-button>
                                            </div>
                                            <div>
                                                <el-button type="primary" size="small" class="mb_fill">添加</el-button>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-show="tab3Index == 3">
                                <div class="lg_wrap">
                                    <el-row>
                                        <el-col :span="24">
                                            <p class="list_t">网络诊断</p>
                                            <div class="list_line"></div>
                                            <div class="list">
                                                <el-row :gutter="20">
                                                    <el-col :xs="24" :sm="8">
                                                        <div class="list_item no-b">
                                                            <el-input size="small" class=""></el-input>
                                                        </div>
                                                        <div class=" flex_h justify_between">
                                                            <el-select v-model="protocol" placeholder="请选择" size="small" style="width:48%">
                                                                <el-option
                                                                  v-for="(item,index) in ['test']"
                                                                  :key="index"
                                                                  :label="item"
                                                                  :value="item">
                                                                </el-option>
                                                            </el-select>
                                                            <el-button type="primary" style="width: 48%">Ping</el-button>
                                                        </div>
                                                    </el-col>
                                                    <el-col :xs="24" :sm="8" class="mb_v_margin">
                                                        <div class="list_item no-b">
                                                            <el-input size="small" class=""></el-input>
                                                        </div>
                                                        <div class=" flex_h justify_start"><el-button type="primary" class="mb_fill">Traceroute</el-button></div>
                                                    </el-col>
                                                    <el-col :xs="24" :sm="8" class="mb_v_margin">
                                                        <div class="list_item no-b">
                                                            <el-input size="small" class=""></el-input>
                                                        </div>
                                                        <div class=" flex_h justify_start"><el-button type="primary" class="mb_fill">Nslookup</el-button></div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div v-show="tab3Index == 4">
                                <div class="md_wrap mb_fill">
                                    <p class="list_t">485串口配置</p>
                                    <div class="list_line"></div>
                                    <div class="list">
                                        <div class="list_item flex_h align_center justify_between no-b">
                                            <span>通信波特率</span>
                                            <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                                    <el-option
                                                      v-for="(item,index) in protocolOpts"
                                                      :key="index"
                                                      :label="item"
                                                      :value="item">
                                                    </el-option>
                                                </el-select>
                                        </div>
                                        <div class="list_item flex_h align_center justify_between no-b">
                                            <span>校验</span>
                                            <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                                    <el-option
                                                      v-for="(item,index) in protocolOpts"
                                                      :key="index"
                                                      :label="item"
                                                      :value="item">
                                                    </el-option>
                                                </el-select>
                                        </div>
                                        <div class="list_item flex_h align_center justify_between no-b">
                                            <span>数据位</span>
                                            <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                                    <el-option
                                                      v-for="(item,index) in protocolOpts"
                                                      :key="index"
                                                      :label="item"
                                                      :value="item">
                                                    </el-option>
                                                </el-select>
                                        </div>
                                        <div class="list_item flex_h align_center justify_between no-b">
                                            <span>停止位</span>
                                            <el-select v-model="protocol" placeholder="请选择" size="small" class="tab_select">
                                                    <el-option
                                                      v-for="(item,index) in protocolOpts"
                                                      :key="index"
                                                      :label="item"
                                                      :value="item">
                                                    </el-option>
                                                </el-select>
                                        </div>
                                        <div class="list_item no-b">
                                            <el-button type="primary" class="btn-300 mb_fill">配置</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="tab3Index == 5">
                                <div>
                                    <p class="dark_content fz14">生成日志到本地</p>
                                    <el-button type="primary" class="btn-210 mt20 mb_fill">生成备份</el-button>
                                </div>
                            </div>
                            <div v-show="tab3Index == 6">
                                <el-row class="">
                                    <el-col :span="24">
                                        <p class="list_t">Zigbee参数</p>
                                        <div class="list_line"></div>
                                        <div class="list">
                                            <div class="flex_h align_center list_item_uniform">
                                                <p class="t">MAC地址</p>
                                                <p class="t">信道</p>
                                                <p class="t">panid</p>
                                            </div>
                                            <div class="flex_h align_center list_item_uniform">
                                                <p>f8:84:79:01:b0:76</p>
                                                <p>192.168.0.1</p>
                                                <p>nader001</p>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="activeIndex == 4">
                    <div>
                        <div class="tab3_head pc">
                            <div :class="['tab3_head_item',tab4Index == 0 ? 'active' : '']" @click="switchTab4(0)">
                                <span>密码设置</span>
                            </div>
                            <div :class="['tab3_head_item',tab4Index == 1 ? 'active' : '']" @click="switchTab4(1)">
                                <span>恢复出厂设置</span>
                            </div>
                            <div :class="['tab3_head_item',tab4Index == 2 ? 'active' : '']" @click="switchTab4(2)">
                                <span>备份升级</span>
                            </div>
                            <div :class="['tab3_head_item',tab4Index == 3 ? 'active' : '']" @click="switchTab4(3)">
                                <span>周期任务</span>
                            </div>
                            <div :class="['tab3_head_item',tab4Index == 4 ? 'active' : '']" @click="switchTab4(4)">
                                <span>重启</span>
                            </div>
                        </div>
                        <div class="tab3_head_mb mb">
                            <div :class="['tab3_head_item',tab4Index == 0 ? 'active' : '']" @click="switchTab4(0)">
                                <span>密码设置</span>
                            </div>
                            <div :class="['tab3_head_item',tab4Index == 1 ? 'active' : '']" @click="switchTab4(1)">
                                <span>恢复出厂设置</span>
                            </div>
                            <div :class="['tab3_head_item',tab4Index == 2 ? 'active' : '']" @click="switchTab4(2)">
                                <span>备份升级</span>
                            </div>
                            <div :class="['tab3_head_item',tab4Index == 3 ? 'active' : '']" @click="switchTab4(3)">
                                <span>周期任务</span>
                            </div>
                            <div :class="['tab3_head_item',tab4Index == 4 ? 'active' : '']" @click="switchTab4(4)">
                                <span>重启</span>
                            </div>
                        </div>
                        <div class="tab3_content">
                            <div v-show="tab4Index == 0" class="small_wrap mb_fill">
                                <p class="list_t">更改用户名密码</p>
                                <div class="list_line"></div>
                                <div class="list">
                                    <div class="list_item flex_h align_center no-b">
                                        <el-select v-model="protocol" placeholder="请选择" size="small" class="btn-210 mb_fill">
                                            <el-option
                                              v-for="(item,index) in protocolOpts"
                                              :key="index"
                                              :label="item"
                                              :value="item">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div class="list_item flex_h align_center no-b">
                                        <el-input size="small"></el-input>
                                    </div>
                                    <div class="list_item flex_h align_center no-b">
                                        <el-button type="primary" class="btn-210 mb_fill">确认</el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-show="tab4Index == 1">
                                <div>
                                    <p class="dark_content fz14">恢复出厂设置将删除所有的配置信息，请慎重选择。</p>
                                    <el-button type="primary" class="btn-210 mt20 mb_fill">恢复出厂设置</el-button>
                                </div>
                            </div>
                            <div v-show="tab4Index == 2">
                                <el-row :gutter="40">
                                    <el-col :md="12" :sm="24">
                                        <p class="list_t">备份</p>
                                        <div class="list_line"></div>
                                        <div class="list">
                                            <div class="list_item no-b flex_h justify_start">
                                                <span>备份当前系统配置文件</span>
                                            </div>
                                            <div class="list_item no-b flex_h justify_start">
                                                <el-button type="primary" class="btn-210">
                                                    生成备份
                                                </el-button>
                                            </div>
                                            <div class="list_item no-b flex_h justify_start">
                                                <span>上传备份以恢复配置</span>
                                            </div>
                                            <div class="flex_h align_center">
                                                <el-button type="info" class="btn-210">
                                                    选择文件
                                                </el-button>
                                                <el-button type="primary">
                                                    上传备份
                                                </el-button>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col :md="12" :sm="24" class="mb_v_margin">
                                        <p class="list_t">固件升级</p>
                                        <div class="list_line"></div>
                                        <div class="list">
                                            <div class="list_item no-b flex_h justify_start">
                                                <el-button type="info" class="btn-210">
                                                    上传本地固件升级
                                                </el-button>
                                            </div>
                                            <div class="list_item no-b flex_h justify_start">
                                                <el-button type="primary" class="btn-210">
                                                    在线升级固件
                                                </el-button>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-show="tab4Index == 3">
                                <div class="small_wrap mb_fill">
                                    <div class="flex_h align_center justify_between">
                                        <p class="list_t mb0">周期重启设备</p>
                                        <el-switch
                                          active-color="#30BBF7"
                                          inactive-color="#efefef"
                                          v-model="val1"
                                          >
                                        </el-switch>
                                    </div>
                                    <div class="list_line mt20"></div>
                                    <div class="list_item no-b flex_h justify_start">
                                        <span>重启周期</span>
                                        <span></span>
                                    </div>
                                    <el-select v-model="protocol" placeholder="请选择" size="small" class="btn-210 mb_fill">
                                        <el-option
                                          v-for="(item,index) in protocolOpts"
                                          :key="index"
                                          :label="item"
                                          :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div v-show="tab4Index == 4">
                                <div>
                                    <p class="dark_content fz14">重新启动将会终端所有连接，需要大约1分钟恢复，可能需要手工连接。</p>
                                    <el-button type="primary" class="btn-210 mt20 mb_fill">重新启动</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="copyright">©2016-2017上海良信电器股份有限公司沪ICP备17037559号-1版权所有</p>
        <Dialog :isVisible="isAdd" :data="addData" :cancelCb="cancelCb" :submitCb="submitCb"/>
    </div>
</template>
<script>
import Dialog from './dialog'
import request from '../utils/request'
import url from '../utils/url'
export default {
    data () {
        return {
            activeIndex:0,
            tab3Index:0,
            tab4Index:0,
            protocol:'PPOE',
            protocolOpts:['DHCP客户端','静态地址','PPOE'],
            val1:'',
            isAdd:false,
            addData:{}
        }
    },
    components:{Dialog},
    created(){
        request(url.testUrl,{}).then(res => {
            console.log('res',res)
        })
    },
    methods:{
        switchItem(index){
            if ( index == this.activeIndex ) return false;
            this.activeIndex = index;
        },
        switchTab3(index){
            if ( index == this.tab3Index ) return false;
            this.tab3Index = index;
        },
        switchTab4(index){
            if ( index == this.tab4Index ) return false;
            this.tab4Index = index;
        },
        cancelCb(){
            this.isAdd = false;
        },
        submitCb(data){
            this.isAdd = false;
            console.log('data',data)
        },
        addJudge(){
            if (  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.screen.width < 576 ){
                this.openAddModel();
            }
        },
        openAddModel(key){
            this.isAdd = true;
            this.addData = {
                title:'测试',
                opts:[{
                    name:'选择1',
                    key:'1',
                    type:'select',
                    options:['jjj','lll'],
                },{
                    name:'选择2',
                    key:'2',
                    type:'input',
                }]
            }
        }
    }
}
</script>
<style lang="less" >
@import url('./index.less');
@import url('./response.less');
@import url('./common/flex.less');
</style>


